﻿var map, dialog;
var highlightSymbol,land;
require([
    "esri/map", "esri/layers/FeatureLayer","esri/geometry/Extent",
    "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
    "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang",
    "esri/Color", "dojo/number", "dojo/dom-style","esri/geometry/Point", "esri/SpatialReference",
    "dijit/TooltipDialog", "dijit/popup","esri/renderers/UniqueValueRenderer", "dojo/domReady!"
], function(
    Map, FeatureLayer,Extent,
    SimpleFillSymbol, SimpleLineSymbol,
    SimpleRenderer, Graphic, esriLang,
    Color, number, domStyle,Point,spatialReference,
    TooltipDialog, dijitPopup,UniqueValueRenderer
) {
    map = new Map("map", {
        basemap: "streets",
        center: [120.155,30.16],
        zoom: 14,
        slider: false
    });



        var symbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
        symbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);

        var renderer = new UniqueValueRenderer(symbol, "DL");

        //add symbol for each possible value
        renderer.addValue("JZ", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.8])));
        renderer.addValue("SZ", new SimpleFillSymbol().setColor(new Color([255,191,0, 0.8])));
        renderer.addValue("SY", new SimpleFillSymbol().setColor(new Color([255,0,0, 0.8])));
        renderer.addValue("GC", new SimpleFillSymbol().setColor(new Color([173,173,173, 0.8])));
        renderer.addValue("GY", new SimpleFillSymbol().setColor(new Color([77,0,0, 0.75])));
        renderer.addValue("LD", new SimpleFillSymbol().setColor(new Color([0,204,0, 0.8])));
        renderer.addValue("WT", new SimpleFillSymbol().setColor(new Color([255,128,159, 0.8])));
        renderer.addValue("QT", new SimpleFillSymbol().setColor(new Color([0,255,255, 0.8])));

        land = new FeatureLayer("http://192.168.1.157:8399/arcgis/rest/services/zhxtd/ground_plan/MapServer/2", {
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields: ["*"]
        });
        land.setRenderer(renderer);
        //land.setRenderer(new SimpleRenderer(symbol));
        map.addLayer(land);

        map.infoWindow.resize(245, 125);

        dialog = new TooltipDialog({
            id: "tooltipDialog",
            style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"
        });
        dialog.startup();

         highlightSymbol = new SimpleFillSymbol(
            SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(
                SimpleLineSymbol.STYLE_SOLID,
                new Color([0, 255, 255]), 3
            ),
            new Color([125, 125, 125, 0.35])
        );


    //listen for when the onMouseOver event fires on the countiesGraphicsLayer
    //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
    land.on("click", function(evt){
        //console.log(evt);
        map.graphics.clear();
        //dijitPopup.close(dialog);
        var t = "<b>${ID}</b><hr><b>Di Lei: </b>${DL}<br>"
            + "<b>Type: </b>${type}<br>"
            + "<b>x: </b>${X}<br>"
            + "<b>y: </b>${Y}";

        var content = esriLang.substitute(evt.graphic.attributes,t);
        var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
        map.graphics.add(highlightGraphic);

        dialog.setContent(content);

        domStyle.set(dialog.domNode, "opacity", 0.85);
        map.centerAt(evt.mapPoint);
        dijitPopup.open({
            popup: dialog,
            x: evt.pageX,
            y: evt.pageY

        //console.log(evt.pageX,evt.pageY);
        //console.log(map.extent.getCenter());
    });

    //map.on("extent-change",function(delta,extent){
    //    console.log(delta,extent);
    //    map.graphics.clear();
    //    dijitPopup.close(dialog);
    //    domStyle.set(dialog.domNode, "opacity", 0.85);
    //    dialog.setContent(content);
    //    dijitPopup.open({
    //        popup: dialog,
    //        x: delta.X,
    //        y: delta.Y
    //
    //    })

    });
    //function closeDialog() {
    //    map.graphics.clear();
    //    dijitPopup.close(dialog);
    //}

});